<template>
<page>
  <div class="wrapper">
    <head :backFlag="false">
      <div class="leftBox" slot="left" @click="backPage">
        <text class="arricon2">&#xe603;</text>
      </div>
      <div class="logoImgBox" slot="center">
        <image class="mlogo" src="root:img/mlogo.png" />
        <text class="logoTxt">GIV</text>
      </div>
    </head>
    <div class="bt"></div>
    <div class="searchBox">
      <div class="inputbox">
        <input
          autofocus
          @focus="focusInput"
          :value="searchVal"
          class="tips"
          placeholder="Search"
          ref="input1"
          @input="chagenVal"
        />
      </div>
      <div class="rightBox" @click="searchBtn">
        <text class="searchIcon iconfont">&#xe62a;</text>
      </div>
    </div>
    <div class="pageContent">
      <div class="historyMode" v-if="pageType=='search'">
        <div class="hisTop">
          <text class="hisTit">Historical search</text>
          <text class="iconfont hisDel" @click="clearHis">&#xe6e4;</text>
        </div>
        <div class="hisItem" v-if="searchArr.length>0">
          <text
            class="itemLi"
            v-for="(item,index) in searchArr"
            :key="index"
            @click="searchRet({value:item})"
          >{{item}}</text>
        </div>
      </div>
      <scroller class="listMode" v-if="pageType=='list'">
        <div class="recontent" v-if="shopList.length>0">
          <div class="reitem" v-for="(item,index) in shopList" :key="index">
            <image class="goodsImg" :src="item.thumb" @click="toDetail(item.id)" />
            <div class="contentBox">
              <text class="goodsTitle2">{{item.title}}</text>
              <div class="priceInfo">
                <div class="leftInfo">
                  <text class="symbol">AU$</text>
                  <text class="money">{{item.price}}</text>
                  <!-- <text class="reduce">80%</text> -->
                  <!-- <text class="shopType">NEW</text> -->
                </div>
                <div class="leftInfo">
                  <!-- <text class="iconfont shopIcon">&#xe64c;</text>
                  <text class="iconfont shopIcon">&#xe634;</text>
                  <text class="iconfont shopIcon">&#xe607;</text>-->
                </div>
              </div>
            </div>
          </div>
        </div>
        <empty
          v-if="shopList.length==0&&!isLoading"
          tips="No results found"
          img="root:img/e_seel.png"
        ></empty>
      </scroller>
    </div>
    <div class="maskClack" @click="e=>e.stopPropagation()" v-if="isLoading">
      <floading class="indicator" color="#303030"></floading>
    </div>
  </div>
</page>
</template>

<script>
const navbar = weex.requireModule("navbar");

import asCore from "../../mixin/core";
import { get_goods_list } from "../../mixin/ajax.js";
export default {
  data() {
    return {
      pageType: "search",
      amount: 0,
      shopList: [],
      searchList: "",
      searchVal: "",
      setype: "0,1"
    };
  },
  computed: {
    searchArr() {
      if (!this.searchList) {
        return [];
      }
      return this.searchList.split(",");
    }
  },
  mounted() {
    this.$refs.input1.focus();
  },
  methods: {
    onLoad(parmars) {
      this.log(parmars)
      if (parmars && parmars.parmar) {
        return false;
      }
      if (parmars.types) {
        this.searchType = parmars.types;
      }
      this.getHist(parmars);
    },
    chagenVal(val) {
      this.searchVal = val.value;
    },
    toDetail(id) {
      if (this.searchType == '2') {
        this.push("root:app/goods/goods2.js", { id: id });
      } else {
        this.push("root:app/goods/goods.js", { id: id });
      }
    },
    getHist(parmars) {
      var storage = weex.requireModule("storage");
      storage.getItem("searchHist", event => {
        var value = event.data;
        if (event.result != "success") {
          value = "";
        }
        this.searchList = value;
        if (parmars) {
          if (parmars.types) {
            this.setype = parmars.types;
          }
          if (parmars.name) {
            this.searchRet({
              value: parmars.name
            });
          }
        }
      });
    },
    backPage() {
      if (this.pageType == "list") {
        this.$refs.input1.focus();
      } else {
        this.back();
      }
    },
    clearHis() {
      this.modal.confirm(
        {
          message: "Are you sure to delete all history?",
          okTitle: "Confirm",
          cancelTitle: "Cancel"
        },
        res => {
          if (res == "Confirm") {
            var storage = weex.requireModule("storage");
            storage.removeItem("searchHist", () => {
              this.getHist();
            });
          }
        }
      );
    },
    gonext(url, parmar) {
      this.push(url, parmar);
    },
    focusInput() {
      this.pageType = "search";
    },
    searchBtn() {
      if (this.searchVal) {
        this.searchRet({ value: this.searchVal });
      } else {
        // this.searchRet({ value: "Notebook" });
      }
    },
    searchRet(param) {
      let that = this;
      this.$refs.input1.blur();
      this.pageType = "list";
      this.searchVal = param.value;

      let searchHist = param.value;

      if (this.searchList) {
        searchHist = param.value + "," + this.searchList;

        if (this.searchArr.filter(item => item == param.value).length > 0) {
          searchHist = this.searchList;
        }
      }
      if (param.value) {
        var storage = weex.requireModule("storage");
        storage.setItem("searchHist", searchHist, () => {
          that.getHist();
        });
      }
      // return false;/
      this.isLoading = true;
      let datas = {
        users_id: "",
        keywords: param.value,
        categoryid: "",
        type: this.setype,
        status: "1",
        page: 1,
        page_num: "10"
      };
      get_goods_list(datas, (res, flag) => {
        this.isLoading = false;
        if (flag) {
          if (res.code == "200") {
            that.shopList = res.data.list;
          } else {
            that.toast(res.message);
          }
        }
      });
    }
  }
};
</script>

<style scoped lang="less">
.wrapper {
  background-color: #ffffff;
  flex: 1;
}

.pageContent {
  flex: 1;

  width: 750px;
}
.leftBox {
  align-items: center;
  flex-direction: row;
  flex: 1;
  justify-content: center;
}
.arricon2 {
  font-size: 40px;
  font-family: iconfont;
  color: #fff;
}
.logoImgBox {
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.mlogo {
  width: 43px;
  height: 37px;
  margin-right: 5px;
}
.logoTxt {
  font-size: 32px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
}
.rightBox {
  align-items: center;
  flex-direction: row;

  &:active {
    background-color: #f2f2f2;
  }
}
.historyMode {
  width: 750px;
}
.maskClack {
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  top: 0;
  justify-content: center;
  align-items: center;
  background-color: transparent;
}
.indicator {
  width: 40px;
  height: 40px;
}
.listMode {
  width: 750px;
  background-color: #f2f2f2;
}

.hisTop {
  flex-direction: row;
  padding: 24px 32px;
  justify-content: space-between;
  align-items: center;
}

.hisItem {
  flex-direction: row;
  flex-wrap: wrap;
  padding: 32px;
}

.itemLi {
  margin-right: 20px;
  margin-bottom: 24px;
  height: 55px;
  line-height: 55px;
  padding: 0 40px;
  background-color: #e6e6e6;
  border-radius: 55px;
  color: #666666;
}

.hisTit {
  font-size: 28px;
  color: #000000;
}

.hisDel {
  font-size: 30px;
  color: #999999;
}
.searchBox {
  padding: 20px 32px;
  flex-direction: row;
  width: 750px;
}
.inputbox {
  overflow: hidden;
  background-color: #fff;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  border-radius: 40px;
  height: 58px;
  flex: 1;
  padding: 0 40px;
  margin-right: 20px;
  border-width: 1px;
  border-style: solid;
  border-color: #e1e1e1;
  /* margin-left: 32px; */
}

.iconfont {
  font-family: iconfont;
}

.bt {
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #e1e1e1;
}

.searchIcon {
  font-family: iconfont;
  color: #fff;
  background-color: #303030;
  line-height: 58px;
  height: 58px;
  width: 120px;
  border-radius: 30px;
  text-align: center;
  font-size: 30px;
}

.tips {
  height: 58px;
  font-size: 28px;
  flex: 1;
}

.scroller {
  flex: 1;
}

.recontent {
  width: 750px;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 24px 32px;
  /* background-color: #000000; */
}

.reitem {
  height: 516px;
  margin-top: 10px;
  margin-bottom: 10px;
  background-color: #fff;
  border-radius: 10px;
  /* justify-content: space-between; */
}

.goodsImg {
  width: 336px;
  height: 336px;
}

.contentBox {
  width: 336px;
  padding: 0 20px;
}

.goodsTitle {
  font-size: 20px;
  height: 56px;
  line-height: 28px;
  margin-top: 12px;
  color: #1e1e1e;
  text-overflow: ellipsis;
  lines: 2;
}

.goodsTitle2 {
  font-size: 26px;
  height: 74px;
  line-height: 37px;
  margin-top: 16px;
  color: #1e1e1e;
  text-overflow: ellipsis;
  lines: 2;
}

.priceInfo {
  margin-top: 20px;
  flex-direction: row;
  justify-content: space-between;
}

.leftInfo {
  flex-direction: row;
  align-items: flex-end;
}

.symbol {
  color: red;
  margin-bottom: 5px;
  margin-right: 5px;
}

.money {
  color: red;
  font-size: 32px;
  font-weight: bold;
  margin-right: 5px;
}

.shopIcon {
  font-size: 32px;
  margin-left: 10px;
}
</style>
